
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>

    </style>
</head>
<body>
<div id="div1" class="level1" >
    <div>msg1</div>
    <menu-item :hello-tom="hello"></menu-item>
</div>

<script type="text/javascript">
    /*
      组件之间的参数传递：由父组件传递到子组件
    */
    Vue.component("menu-one", {
        props: ['msg11'],

        template: '<div>{{msg11}}</div>',
    });

    Vue.component("menu-item", {
        props: ['helloTom'],

        template: '<div>{{helloTom}} <menu-one  msg11="value11"></menu-one></div>',
    });

    const vm = new Vue({
        el: '#div1',
        data: {
            msg1: '组件参数1',
            msg2: '组件参数2',
            hello: "hello tom",


        }
    });
</script>
</body>
</html>
